{% extends 'layouts/base.html' %}
{% load bootstrap3 %}
{% load staticfiles %}
{% load team %}

{% block nav %}

{% endblock %}

{% block script %}
<script src="{% static 'js/setting.js' %}"></script>
{% endblock %}

{% block content %}
    {% bootstrap_messages %}
    <h2>团队</h2>
    <form action="" method="post" class="form-horizontal" role="form">
        {% csrf_token %}
        {% bootstrap_form_errors form %}
        {% bootstrap_field form.name layout='horizontal' %}
        <div class="form-group">
            <div class="col-md-offset-2 col-md-4">
                <button type="submit" class="btn btn-primary">保存</button>
            </div>
        </div>
        <div class="form-group">
            <label class="col-md-2 control-label">成员</label>

            <div class="col-md-8">
                <div class="form-control-static">
                    <div class="team-members" id="team_members">
                        <div class="member member-add">
                            <a href="#modal-member-invite" data-toggle="modal">邀请成员</a>
                        </div>
                        {% for ship in memberships %}
                            <div class="{%  member_class ship %}" id="member-{{ ship.id }}">
                                <img src=" {% if ship.member.avatar %}{{ ship.member.avatar.url }}{% else %}{% static 'images/avatar.jpg' %}{% endif %}"
                                     alt="{{ ship.member.nickname }}" class="avatar">

                                <p class="name">{{ ship.member.nickname }}</p>

                                <p class="label">{{ ship.get_role_display }}</p>
                                {% if ship.member != user and can_admin %}
                                    {% if ship.role == 'admin' %}
                                        <a href="javascript:void(0)" class="grade downgrade" title="降级为普通成员">成员</a>
                                    {% elif ship.role == 'general' %}
                                        <a href="javascript:void(0)" class="grade upgrade" title="升级为管理员">管理员</a>
                                    {% endif %}
                                    {% if ship.role != 'owner' %}
                                        <a href="javascript:void(0)" class="remove" title="删除">删除</a>
                                    {% endif %}
                                {% endif %}
                            </div>
                        {% endfor %}
                        {% for invitation in invitations %}
                            <div class="member inactive" id="member-{{ invitation.token }}">
                                <img src=" {% static 'images/avatar.jpg' %}"
                                     alt="{{ invitation.email }}" class="avatar">
                                <p class="name">{{ invitation.name }}</p>
                                <p class="label">{{ invitation.get_status_display }}</p>
                                <a href="javascript:void(0)" class="invite-link">查看邀请链接</a>
                                <a href="javascript:void(0)" class="delete" title="删除">删除</a>
                            </div>
                        {% endfor %}
                    </div>
                </div>
            </div>
        </div>
    </form>
{% endblock %}

{% block footer %}
    <div class="modal fade" id="modal-member-invite" tabindex="-1" role="dialog"
         aria-labelledby="model-member-invite-label" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal">
                        <span aria-hidden="true">&times;</span>
                        <span class="sr-only">关闭</span>
                    </button>
                    <h4 class="modal-title" id="model-member-invite-label">邀请成员</h4>
                </div>
                <form action="{% url 'team_invite' team.pk %}" role="form" method="post">{% csrf_token %}
                <div class="modal-body">
                    {% bootstrap_field invitation_form.emails %}
                    {% bootstrap_field invitation_form.message %}
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
                    <button type="submit" class="btn btn-primary" id="btn-invite">确定</button>
                </div>
                </form>
            </div>
        </div>
    </div>
    <script type="text/html" id="tmpl-member">
        <div class="member inactive" id="member-<%- data.token %>">
            <img class="avatar" src="<%- data.avatar %>" />
            <div class="name"><%- data.name %></div>
            <div class="label">邀请中</div>
            <a href="javascript:void(0)" class="invite-link">查看邀请链接</a>
            <a href="javascript:void(0)" class="delete" title="删除">删除</a>
        </div>
    </script>
{% endblock %}
